<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">id: <input type="text" class="form-control" v-model="id"> </label>

                <label for=""> name：<input type="text" class="form-control" v-model="name"></label>

                <input type="button" name="button" id="btn" class="btn btn-primary" value="添加" @click="add">

                <label for=""> 搜索名称关键词：<input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'"></label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>Id</th>
                <th>Name</th>
                <th>cTime</th>
                <th>Operation</th>
                </th>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{item.cTime| dateFormat('yyyy-mm-dd')}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="app2">
        <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
    </div>
</body>

<script>
    // 全局的过滤器， 进行时间的格式化
    // 所谓的全局过滤器，就是所有的VM实例都共享的
    Vue.filter('dateFormat', function(dateStr, pattern = "") {
        // 根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr)

        //   yyyy-mm-dd
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1
        var d = dt.getDate()

        // return y + '-' + m + '-' + d



        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes()
            var ss = dt.getSeconds()

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    });

    // 自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113

    // 使用  Vue.directive() 定义全局的指令  v-focus
    // 其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 
    // 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
    //  参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus', {
        bind: function(el) { // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
            // 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
            // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
            //  因为，一个元素，只有插入DOM之后，才能获取焦点
            // el.focus()
        },
        inserted: function(el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
            el.focus()
                // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
        },
        updated: function(el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次

        }
    })

    // 自定义一个 设置字体颜色的 指令
    Vue.directive('color', {
        // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
        // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        bind: function(el, binding) {
            // el.style.color = 'red'
            // console.log(binding.name)
            // 和样式相关的操作，一般都可以在 bind 执行

            // console.log(binding.value)
            // console.log(binding.expression)

            el.style.color = binding.value
        }
    })



    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [{
                id: 1,
                name: '奔驰',
                cTime: new Date()
            }, {
                id: 2,
                name: '宝马',
                cTime: new Date()
            }, {
                id: 3,
                name: '奥迪',
                cTime: new Date()
            }]
        },
        methods: {
            add() { //添加的方法
                console.log("add.....");
                var car = {
                    id: this.id,
                    name: this.name,
                    cTime: new Date()
                }
                this.list.push(car);
                this.id = this.name = '';
            },
            del(id) {

                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                });
                this.list.splice(index, 1)
            },
            search(keywords) {
                var newList = [];
                this.list.forEach(item => {
                    if (item.name.includes(keywords)) {
                        newList.push(item);
                    }
                });
                return newList;
            }
        }
    });

    // 如何自定义一个私有的过滤器（局部）
    var vm2 = new Vue({
        el: '#app2',
        data: {
            dt: new Date()
        },
        methods: {},
        filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
            // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
            dateFormat: function(dateStr, pattern = '') {
                // 根据给定的时间字符串，得到特定的时间
                var dt = new Date(dateStr)

                //   yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDate().toString().padStart(2, '0')

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours().toString().padStart(2, '0')
                    var mm = dt.getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
                }
            }
        },
        directives: { // 自定义私有指令
            'fontweight': { // 设置字体粗细的
                bind: function(el, binding) {
                    el.style.fontWeight = binding.value
                }
            },
            'fontsize': function(el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
                el.style.fontSize = parseInt(binding.value) + 'px'
            }
        }
    })


    //过滤器的定义语法
    //Vue.filter('过滤器名称', function(){})
</script>

</html>